<template>
	<m-layout title="幸运红包">
		<view class="rollBox">
			<liu-notice-bar :dataList="noticeList" :type="2" color="#ffecba" :interval="3000"></liu-notice-bar>
		</view>
		<view class="mianLuc">
			<view class="luc_topBox flex-center">
				<view class="text_img">
					<image src="../../../static/images/pages/home/luckyRewards/text.png"></image>
					<view class="text_left_icon">
						<image src="../../../static/images/pages/home/luckyRewards/text_left.png"></image>
					</view>
					<view class="text_right_icon">
						<image src="../../../static/images/pages/home/luckyRewards/text_right.png"></image>
					</view>

					<view class="bj_left_icon">
						<image src="../../../static/images/pages/home/luckyRewards/bj_left_icon.png"></image>
					</view>

					<view class="bj_right_icon">
						<image src="../../../static/images/pages/home/luckyRewards/bj_right_icon.png"></image>
					</view>
				</view>
			</view>
			<view class="luc_list">
				<view class="luc_item" v-for="item in rbgconfig">
					<view class="luc_itemImg">
						<image v-if="luckPosition==item.id"
							src="../../../static/images/pages/home/luckyRewards/cj_bj2.png"></image>
						<image v-else src="../../../static/images/pages/home/luckyRewards/cj_bj1.png"></image>
						<view class="luc_itemText flex ai-baseline">
						  {{item.gamount}}
						  <text class="fs21">元</text>
						</view>
					</view>
				</view>
			</view>
			<view class=" flex jc-center mt-36 mb-24 text-white fs24 flex-column">
				<!-- <view class="">
					今日剩余奖池金额：{{zt_day_amount}}元
				</view> -->
				<view class="">
					剩余抽奖次数：{{cj}}
				</view>
			</view>
			<view class="luc_btn" :class="[!cj||!zt_day_amount?'joined':'']" @click="cjFn()">
				<image src="../../../static/images/pages/home/luckyRewards/cjBtn.png"></image>
				<view class="luc_BtnText">立即抽奖</view>
			</view>
			<view class="luc_rule">
				<view class="rule_title">抽奖规则</view>
				<view class="fs25">抽奖前提：新注册用户首次成为消费商（最低消费599）</view>
				<view class="fs25">100%中奖，每个用户可抽次数规则如下：</view>
				<view>1、599~1次</view>
				<view>2、1599~2次</view>
				<view>3、3999~3次</view>
				<view>4、9999~5次</view>
			</view>
		</view>
		<!-- 奖励弹框 -->
		<uni-popup ref="rewardPop" class="rewardPop">
			<image class="light " src="../../../static/images/pages/home/luckyRewards/light.png"></image>
			<image class="bgPoint" src="../../../static/images/pages/home/luckyRewards/bgPoint.png" mode=""></image>
			<view class="ta-center ptb-48 flex-column">
				<text class=" text-red fs42">恭喜获得</text>
				<view class=" text-red flex jc-center fs60 ai-baseline"
					style="font-family: RousseauDeco; font-size: 42px;">
					<text>{{prize}}</text>
					<text class="fs21 ml-4">元</text>
				</view>
			</view>
			<m-icon class="closeBtn" type="icon-quxiao" color="#fff" size="48" @click="closeBtn"></m-icon>
		</uni-popup>
	</m-layout>
</template>

<script>
	import { active_0724_rbgconfig, active_0724_pool, active_0724_receive, active_0724_logs } from '@/api/active.js'
	export default {
		name: 'reward',
		data() {
			return {
				zt_day_amount: 0, // 奖池
				prizeShow: false, // 弹框
				prize: 0, //获取奖金
				interval: null, // 计时器
				intime: 50, // 动画切换时间
				luckPosition: 0, // 最终停止位置
				luckArr: [], // 红包ID集合
				cj: 0, // 剩余抽奖次
				zcj: 0, // 总抽奖次数
				maxLength: 9, // 红包展示数量
				rbgconfig: [], // 红包配置
				noticeList: []
			}
		},
		onLoad() {
			this.getPool()
			this.getRbgconfig()
			this.getLogs()

		},
		methods: {
			closeBtn() {
				this.prize = 0;
				this.luckPosition = 0;
				this.close()
			},
			open() {
				this.$refs.rewardPop.open();
			},
			close() {
				this.$refs.rewardPop.close();
			},
			// 中奖名单
			async getLogs() {
				this.noticeList=[];
				const { success, list, msg } = await active_0724_logs({
					pageIndex: 1,
					pageSize: 20,
				})
				list.forEach(item => {
					this.noticeList.push({
						id: item.id,
						titile: `${item.username}${item.content}`
					})
				})
			},
			// 抽奖
			async cjFn() {
				if (!this.cj || !this.zt_day_amount) return;
				this.interval = setInterval(() => {
					var a = Math.ceil(Math.random() * 9);
					this.luckPosition = a
				}, this.intime)
				await this.sleep(3000);
				const { success, data, msg } = await active_0724_receive();
				if (!success) this.Toast(msg)
				if (success) {
					this.prize = data;
					this.open()
					this.getPool()
					this.getLogs()
				}
				clearInterval(this.interval);
				this.luckPosition = 0
			},
			// 获取奖池、剩余次数、总抽奖次数
			async getPool() {
				const { cj, zcj, zt_day_amount } = (await active_0724_pool()).data
				this.cj = cj;
				this.zcj = zcj;
				this.zt_day_amount = zt_day_amount;
			},
			async getRbgconfig() {
				let res = await active_0724_rbgconfig();
				this.rbgconfig = this.computeArraryFn(res, this.maxLength)
			},
			// 计算并随机
			computeArraryFn(arrObj, lengthMax) {
				let a = arrObj;
				let b = lengthMax;
				let c = b - a.length;
				let d = this.objectArraySortByAtr(a, 'rate', false)
				if (c) {
					if (c < a.length) {
						return [...arrObj, ...d.slice(0, c)]
					} else {
						return this.computeArraryFn([...arrObj, ...arrObj], b)
					}
				} else {
					return arrObj
				}
			},
		}
	}
</script>

<style lang="scss">
	.rewardPop {
		::v-deep .uni-popup__wrapper {
			width: 706rpx;
			height: 800rpx;
			// background: url('../../../static/images/pages/home/luckyRewards/bgPoint.png') no-repeat;
			// background-size: 100% 291rpx;
			position: relative;

			.light {
				width: 702rpx;
				height: 702rpx;
				position: absolute;
				z-index: 2;
				top: -160rpx;
				animation: rotate 6s infinite linear;
			}

			.bgPoint {
				left: 43rpx;
				position: absolute;
				width: 592rpx;
				height: 291rpx;
				top: -60rpx;
				z-index: 11;
			}

			.ta-center {
				position: relative;
				z-index: 10;
				margin: 0 auto;
				width: 506rpx;
				height: 467rpx;
				background: url('../../../static/images/pages/home/luckyRewards/cj_bj1.png') no-repeat;
				background-size: 100%, 100%;
			}

			.closeBtn {
				position: absolute;
				left: 50%;
				bottom: 240rpx;
				transform: translate(-50%);
				z-index: 9999;
			}

			@keyframes rotate {
				from {
					transform: rotate(0);
				}

				to {
					transform: rotate(360deg);
				}
			}
		}
	}

	page {
		background: url('../../../static/images/pages/home/luckyRewards/bg.png') no-repeat;
		background-size: 100% 600rpx;
		background-color: #d4203e;
	}

	// 滚动广告
	.rollBox {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding: 6rpx 30rpx;
		background: rgba(0, 0, 0, 0.4);
		::v-deep .notice-swiper-item{
			font-size: 26rpx !important;
		}
	}

	.mianLuc {
		padding: 0rpx 26rpx;

		// 页面顶部广告
		.luc_topBox {

			.text_img {
				position: relative;
				width: 600rpx;
				height: 175rpx;
				margin-top: 45rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text_left_icon {
				position: absolute;
				top: 20rpx;
				left: -15rpx;
				width: 68rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text_right_icon {
				position: absolute;
				top: 20rpx;
				right: -15rpx;
				width: 68rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.bj_left_icon {
				position: absolute;
				top: 0rpx;
				left: -80rpx;
				width: 84rpx;
				height: 149rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.bj_right_icon {
				position: absolute;
				top: -30rpx;
				right: -80rpx;
				width: 84rpx;
				height: 149rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 抽奖列表
		.luc_list {
			margin-top: 35rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-row-gap: 24rpx;

			.luc_item {

				.luc_itemImg {
					position: relative;
					width: 214rpx;
					height: 194rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.luc_itemText {
					position: absolute;
					top: 30rpx;
					left: 50%;
					transform: translate(-50%, 0);
					font-size: 38rpx;
					font-family: Alimama ShuHeiTi;
					font-weight: bold;
					color: #E9302A;
				}
			}

		}

		// 抽奖按钮
		.luc_btn {
			position: relative;
			width: 100%;
			height: 123rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.luc_BtnText {
			position: absolute;
			top: 30rpx;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			text-shadow: 0px 0rpx 0px rgba(255, 179, 122, 0.4);
			background: linear-gradient(0deg, #AE1F32 0%, #D01E40 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		// 抽奖规则
		.luc_rule {
			border-radius: 20rpx;
			background: #ae1735;
			margin-top: 30rpx;
			padding: 30rpx 35rpx;

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFDFDE;
			line-height: 46rpx;

			.rule_title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 10rpx;

				background: linear-gradient(0deg, #FFE08E 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
</style>